<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id='test'></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
    class Demo extends React.Component {
      render() {
        this.input2 = React.createRef()
        return (
          <div>
            {/*<input type="text" ref="input1" placeholder="点击按钮提示数据"/>
            <button onClick={() => {alert(this.refs.input1.value)}}>点击提示左侧输入框的数据</button>*/}
            <input type="text" ref={(a) => {this.input1 = a}} placeholder="点击按钮提示数据"/>
            <button onClick={() => {alert(this.input1.value)}}>点击提示左侧输入框的数据</button>
            <input onBlur={() => {console.log(this.input2);alert(this.input2.current.value)}} type="text" ref={this.input2} placeh
            older="失去焦点提示右侧输入框数据"/>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo/>, document.getElementById('test'))
  </script>
</body>
</html>
<!--
  refs收集的是真实dom
  不推荐在标签上通过ref="字符串"来指定 存在效率问题 可能在未来版本移除
  最新的写法是通过React.createRef()创建
  在构造器中this.myRef = React.createRef()
  <div ref={this.myRef}></div>
  createRef返回一个容器，用来存储ref所标识的节点


  还可以使用回调函数形式的ref

  如果refs的回调函数是以内联函数的方式定义的，在更新的过程中会执行两次，第一次传入的参数为null，第二次传入的参数是dom元素，因为每次渲染时会创建一个新的函数实例，所以React清空旧的ref并设置新的，通过ref的回调定义成class的绑定函数的方式可以避免，即挂载到this上，不写内联
 -->